<template>
  <el-card>
    <div class="mb-4 filterRow">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-input
            v-model="formData.kw"
            class="my-2"
            :placeholder="$t('用户ID、订单号搜索')"
            clearable
            style="width: 100%"
            @change="searchData"
          />
        </el-col>
      </el-row>
      <el-row :gutter="5">
        <el-col :span="5" :xl="4">
          <el-date-picker
            class="my-2"
            style="max-width: 100%; min-width: 160px"
            v-model="formData.time"
            type="datetimerange"
            range-separator="-"
            :start-placeholder="$t('开始时间')"
            :end-placeholder="$t('结束时间')"
            @change="calendarChange"
            :default-time="pickerDefaultTime"
            clearable
          />
        </el-col>
        <el-col :span="3" :xl="2">
          <el-select
            class="my-2"
            v-model="formData.status"
            :placeholder="$t('订单状态')"
            clearable
            @change="searchData"
          >
            <el-option
              v-for="item in statusList"
              :key="item.key"
              :label="item.name"
              :value="item.key"
            />
          </el-select>
        </el-col>
        <el-col :span="3" :xl="2">
          <el-select
            class="my-2"
            v-model="formData.trade_type"
            :placeholder="$t('订单类型')"
            clearable
            @change="searchData"
          >
            <el-option
              v-for="item in orderTypes"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-col>
        <el-col :span="3" :xl="2">
          <el-select
            class="my-2"
            v-model="formData.mer_audit_status"
            :placeholder="$t('商户审核')"
            clearable
            @change="searchData"
          >
            <el-option
              v-for="item in merStatusList"
              :key="item.key"
              :label="item.name"
              :value="item.key"
            />
          </el-select>
        </el-col>
        <el-col :span="3" :xl="2">
          <el-select
            class="my-2"
            v-model="formData.audit_status"
            :placeholder="$t('平台审核')"
            clearable
            @change="searchData"
          >
            <el-option
              v-for="item in merStatusList"
              :key="item.key"
              :label="item.name"
              :value="item.key"
            />
          </el-select>
        </el-col>
        <el-col :span="2" :xl="2">
          <el-button class="my-2" type="primary" @click="searchData">
            {{ $t("查询") }}
          </el-button>
        </el-col>
      </el-row>
    </div>

    <el-table :data="tableList" v-loading="loading">
      <!-- <el-table-column :label="$t('用户ID')" align="center" prop="uid" />
      <el-table-column
        :label="$t('用户账号')"
        align="center"
        prop="account_name"
      /> -->
      <el-table-column
        prop="bill_no"
        :label="$t('订单号')"
        align="center"
        width="250"
      />
      <el-table-column align="center" :label="$t('订单状态')">
        <template #default="scope">
          <span
            :class="
              scope.row.status == 0
                ? 'text-color4'
                : scope.row.status == 2
                ? 'text-color3'
                : 'text-color2'
            "
            >{{ getCurrentStatus(scope.row.status, statusList)?.name }}</span
          >
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="trade_type"
        :label="$t('订单类型')"
      />
      <el-table-column
        align="center"
        prop="create_time"
        :label="$t('时间')"
        width="200"
      >
        <template #default="scope">
          {{
            dayjs(scope.row.create_time * 1000).format("YYYY-MM-DD HH:mm:ss")
          }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="coin_name" :label="$t('币种')" />
      <el-table-column
        align="center"
        prop="amount"
        :label="$t('数量')"
        width="120"
      >
        <template #default="scope">
          <span>{{ scope.row.amount }} </span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="fee" :label="$t('手续费')">
        <template #default="scope">
          <span>{{ scope.row.fee }} </span>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('商户审核')">
        <template #default="scope">
          <span
            :class="
              scope.row.mer_audit_status == 0
                ? 'text-color4'
                : scope.row.mer_audit_status == 2
                ? 'text-color3'
                : 'text-color2'
            "
            >{{
              getCurrentStatus(scope.row.mer_audit_status, merStatusList)?.name
            }}</span
          >
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('平台审核')">
        <template #default="scope">
          <span
            :class="
              scope.row.audit_status == 0
                ? 'text-color4'
                : scope.row.audit_status == 2
                ? 'text-color3'
                : 'text-color2'
            "
            >{{
              getCurrentStatus(scope.row.audit_status, merStatusList)?.name
            }}</span
          >
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        fixed="right"
        :label="$t('操作')"
        width="150"
      >
        <template #default="scope">
          <el-button
            round
            class="cursor-pointer"
            @click="showCurrentDetail(scope)"
            >{{ $t("查看") }}</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <div class="flex justify-center mt-5">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageable.total"
        :default-page-size="pageable.pageSize"
        :default-current-page="pageable.pageNum"
        :page-sizes="[10, 25, 50, 100]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-card>
  <DetailDrawer
    :show="isShowOrderDetail"
    :bill_no="currentBillNo"
    @close="clearBillNo"
  />
</template>
<script setup>
import { ref, reactive, computed } from "vue";
import { getUserBillsApi } from "@/api/account/index";
import { dayjs } from "element-plus";
import { timestamp, pickerDefaultTime } from "@/utils/utils";
import DetailDrawer from "./detailDrawer.vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const loading = ref(true);
let query = reactive({
  page: 1,
  pagesize: 10,
  uid: props.uid,
});
const formData = reactive({
  audit_status: "",
  mer_audit_status: "",
  time: [],
  status: "",
  trade_type: "",
  kw: "",
});

const props = defineProps({
  uid: {
    type: Number,
    default: "",
  },
});

// 分页
const pageable = reactive({
  pageNum: 1,
  pageSize: 10,
  total: 0,
});

const statusList = computed(() => {
  return [
    { name: t("处理中"), key: 0 },
    { name: t("成功"), key: 1 },
    { name: t("失败"), key: 2 },
  ];
});

const merStatusList = computed(() => {
  return [
    { name: t("审核中"), key: 0 },
    { name: t("审核成功"), key: 1 },
    { name: t("审核失败"), key: 2 },
  ];
});

const totalCount = ref(0);
const tableList = ref([]);
const orderTypes = ref([]);
const getWalletBills = async (params) => {
  try {
    loading.value = true;
    let resultParams = { ...query, ...params };
    if (props.isNoReview) {
      resultParams.mer_audit_status = 0;
    }
    console.log(resultParams, "resultParams");
    const { page, list, extra } = await getUserBillsApi(resultParams);
    tableList.value = list;
    pageable.total = page.total_count;
    totalCount.value = page.total_count;
    orderTypes.value = extra.trade_type_map;
    loading.value = false;
  } catch (e) {
    loading.value = false;
    return false;
  }
};
const handleCurrentChange = async (number) => {
  query.page = number;
  await getWalletBills();
};
// 条数
const handleSizeChange = (number) => {
  pageable.pageSize = number;
  getWalletBills();
};
getWalletBills();

const calendarChange = (e) => {
  formData.time = e;
  searchData();
};

const getCurrentStatus = (value, list) => {
  return list.find((item) => item.key == value);
};

//处理筛选的参数
const filterQuery = computed(() => {
  return {
    coin_name: formData.coin_name,
    bill_no: formData.bill_no,
    start:
      formData.time && formData.time[0]
        ? timestamp(formData.time[0].valueOf())
        : "",
    end:
      formData.time && formData.time[1]
        ? timestamp(formData.time[1].valueOf())
        : "",
    trade_type: formData.orderTypes,
    status: formData.status,
  };
});
const searchData = () => {
  query = { ...query, ...filterQuery.value };
  query = Object.fromEntries(
    Object.entries(query).filter(([key, value]) => {
      // 过滤空值
      return value !== "" && value !== null && value !== undefined;
    })
  );
  query.page = 1;
  getWalletBills(query);
};

const currentBillNo = ref("");
const isShowOrderDetail = ref(false);

const showCurrentDetail = (scope) => {
  currentBillNo.value = scope.row.bill_no;
  isShowOrderDetail.value = true;
};

const clearBillNo = (flag) => {
  currentBillNo.value = "";
  isShowOrderDetail.value = false;
  if (flag) {
    getWalletBills();
  }
};
</script>
<style lang="scss">
.filterRow {
  width: 100%;
}
</style>
